<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/tree -->
<div id="app6" style="font-size: 14px">
	<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
	 	//设置数据
	 	data() {
	 		return {
	 			data: [{
	 				label: '一级 1',
	 				children: [{
	 					label: '二级 1-1',
	 					children: [{
	 						label: '三级 1-1-1'
	 					}]
	 				}]
	 			}, {
	 				label: '一级 2',
	 				children: [{
	 					label: '二级 2-1',
	 					children: [{
	 						label: '三级 2-1-1'
	 					}]
	 				}, {
	 					label: '二级 2-2',
	 					children: [{
	 						label: '三级 2-2-1'
	 					}]
	 				}]
	 			}, {
	 				label: '一级 3',
	 				children: [{
	 					label: '二级 3-1',
	 					children: [{
	 						label: '三级 3-1-1'
	 					}]
	 				}, {
	 					label: '二级 3-2',
	 					children: [{
	 						label: '三级 3-2-1'
	 					}]
	 				}]
	 			}],
	 			defaultProps: {
	 				children: 'children',
	 				label: 'label'
	 			}
	 		};
	 	},
	 	methods: {
	    	//事件
	    	handleNodeClick(data) {
	    		console.log(data);
	    	}
	    }
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app6');
</script>